<div *ngFor="let child of lvItems; let last = last">
  <div
    class="breadcrumb-item"
    [ngClass]="{ readonly: !child.routerLink && !child.onClick && !child.items, 'breadcrumb-item-current': last && lvFullPath }"
    [ngStyle]="{ display: child.hidden ? 'none' : 'flex', width: child.width ? child.width : 'auto' }"
    (click)="itemClick($event, child)"
    [attr.title]="child.tips"
    [attr.disabled]="child.disabled === '' || child.disabled ? '' : null"
  >
    <i *ngIf="child.icon" class="breadcrumb-icon" [lvDisabled]="child.disabled" lv-icon="{{ child.icon }}"></i>
    <span *ngIf="!child.items" lv-overflow>{{ child.label }}</span>

    <!-- TODO: 当前无dropdown形式交互规范，且和overflow触发形式有冲突，待与规范对齐后再修改-->
    <ng-container *ngIf="child.items">
      <span lv-dropdown [lvDropdownMenus]="child.items" [lvDropdownTrigger]="'hover'" lv-overflow>
        {{ child.label }}
        <i #lvDropdownTrigger class="breadcrumb-trigger" lv-icon="lv-icon-triangle-down"></i>
      </span>
    </ng-container>
  </div>

  <span class="breadcrumb-separator" [ngSwitch]="true" *ngIf="!last || !lvFullPath">
    <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvSeparator)">
      <ng-container *ngTemplateOutlet="lvSeparator"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="typeUtils.isRealString(lvSeparator)">{{ lvSeparator }}</ng-container>
    <ng-container *ngSwitchDefault>/</ng-container>
  </span>
</div>
